<!--
 * @Description: 
 * @Version: 2.0
 * @Date: 2024-04-10 08:25:07
 * @LastEditTime: 2024-04-10 08:53:14
-->
<template>
  <h1 style="width: 100%; text-align: center">Sorry, page not found!</h1>
  <!-- <p class="text-base text-slate-500 dark:text-neutral-400">
      Sorry, we couldn’t find the page you’re looking for. Perhaps you’ve mistyped
      the URL? Be sure to check your spelling.
    </p> -->
  <div class="not_found">
    <p>
      页面将在<span>{{ time }}</span
      >秒后自动跳转首页，<br />
      您也可以点击这里跳转<a href="/">登录页</a>
    </p>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();

const time = ref(10);
const time_end = ref();

// 倒计时
const GoIndex = () => {
  let _t = 9;
  time_end.value = setInterval(() => {
    if (_t !== 0) {
      time.value = _t--;
    } else {
      router.replace("/");
      clearTimeout(time_end.value);
      time_end.value = null;
    }
  }, 1000);
};

onMounted(() => {
  GoIndex();
});

onUnmounted(() => {
  clearTimeout(time_end.value);
  time_end.value = null;
});
</script>

<style scoped lang="less">
.not_found {
  width: 100%;
  height: 100vh;
  background: url("@/assets/icons/404.svg") no-repeat;
  background-position: center;
  position: fixed;
  p {
    position: absolute;
    top: 50%;
    left: 20%;
    transform: translate(-50%, 0);
    color: #000;
    span {
      color: orange;
      font-family: "仿宋";
      font-size: 25px;
    }
    a {
      font-size: 30px;
      color: aqua;
      text-decoration: underline;
    }
  }
}
</style>
